<template>
  父组件
  <button @click="btnClick">切换</button>
  <hr />
  <template v-if="isShow">
    <suspense>
      <template #default>
        <Son></Son>
      </template>
      <template #fallback>loading</template>
    </suspense>
  </template>
</template>

<script>
import { defineAsyncComponent } from 'vue'
// 异步请求该组件。和react.lazy效果一样
// 进行代码分包
// 1.写法1
const Son = defineAsyncComponent(() => import('./Son.vue'))
// 2.写法2
// const Son = defineAsyncComponent({
//   loader: () => import('./Son.vue'),
//   loadingComponent: 'loading',
//   delay: 2000,
// })
export default {
  components: { Son },
  data() {
    return {
      isShow: false,
    }
  },
  methods: {
    btnClick() {
      this.isShow = !this.isShow
    },
  },
}
</script>

<style scoped></style>
